<!DOCTYPE html>
<!--
 * Copyright (c) 2010 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->

<!--
@fileoverview This file serves as the option page of the extension for
customizing the settings such as setting country, topics and number of
news stories to be shown.
@author navneetg@google.com (Navneet Goel).
-->

<html>
  <head>
    <script src = "/javascript/util.js"></script>
    <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
    <link rel = "stylesheet" href = "/css/options.css"/>
    <script src = "/javascript/options.js"></script>
  </head>
  <body onload = "initialize();">
    <div id = "all_content">
      <div id = "logo">
        <img id = "title_image" src = "/images/news.gif"/>
        <br/>
      </div>
      <br/><br/>

      <table class = "contentTable" style = "margin-left: 55px;" width = "96%">
        <tr class = "all_rows">
          <td class = "col1"><b id = "select_country"></b></td>
          <td class = "col2">
            <select id = "countryList" onchange = "enableSaveButton();">
              <option value = "noCountry">-Select-</option>
              <option value = "es_ar">Argentina</option>
              <option value = "au">Australia</option>
              <option value = "nl_be">België</option>
              <option value = "fr_be">Belgique</option>
              <option value = "en_bw">Botswana</option>
              <option value = "pt-BR_br">Brasil</option>
              <option value = "ca">Canada English</option>
              <option value = "fr_ca">Canada Français</option>
              <option value = "cs_cz">Česká republika</option>
              <option value = "es_cl">Chile</option>
              <option value = "es_co">Colombia</option>
              <option value = "es_cu">Cuba</option>
              <option value = "de">Deutschland</option>
              <option value = "es">España</option>
              <option value = "es_us">Estados Unidos</option>
              <option value = "en_et">Ethiopia</option>
              <option value = "fr">France</option>
              <option value = "en_gh">Ghana</option>
              <option value = "in">India</option>
              <option value = "en_ie">Ireland</option>
              <option value = "en_il">Israel English</option>
              <option value = "it">Italia</option>
              <option value = "en_ke">Kenya</option>
              <option value = "hu_hu">Magyarország</option>
              <option value = "en_my">Malaysia</option>
              <option value = "es_mx">México</option>
              <option value = "en_na">Namibia</option>
              <option value = "nl_nl">Nederland</option>
              <option value = "nz">New Zealand</option>
              <option value = "en_ng">Nigeria</option>
              <option value = "no_no">Norge</option>
              <option value = "de_at">Österreich</option>
              <option value = "en_pk">Pakistan</option>
              <option value = "es_pe">Perú</option>
              <option value = "en_ph">Philippines</option>
              <option value = "pl_pl">Polska</option>
              <option value = "pt-PT_pt">Portugal</option>
              <option value = "de_ch">Schweiz</option>
              <option value = "fr_sn">Sénégal</option>
              <option value = "en_sg">Singapore</option>
              <option value = "en_za">South Africa</option>
              <option value = "fr_ch">Suisse</option>
              <option value = "sv_se">Sverige</option>
              <option value = "en_tz">Tanzania</option>
              <option value = "tr_tr">Türkiye</option>
              <option value = "uk">U.K.</option>
              <option value = "us">U.S.</option>
              <option value = "en_ug">Uganda</option>
              <option value = "es_ve">Venezuela</option>
              <option value = "vi_vn">Việt Nam (Vietnam)</option>
              <option value = "en_zw">Zimbabwe</option>
              <option value = "el_gr">Ελλάδα (Greece)</option>
              <option value = "ru_ru">Россия (Russia)</option>
              <option value = "ru_ua">Украина / русский (Ukraine)</option>
              <option value = "uk_ua">Україна / українська (Ukraine)</option>
              <option value = "iw_il">ישראל (Israel)</option>
              <option value = "ar_ae">الإمارات (UAE)</option>
              <option value = "ar_sa">السعودية (KSA)</option>
              <option value = "ar_me">العالم العربي (Arabic)</option>
              <option value = "ar_lb">لبنان (Lebanon)</option>
              <option value = "ar_eg">مصر (Egypt)</option>
              <option value = "hi_in">हिन्दी (India)</option>
              <option value = "ta_in">தமிழ்(India)</option>
              <option value = "te_in">తెలుగు (India)</option>
              <option value = "ml_in">മലയാളം (India)</option>
              <option value = "kr">한국 (Korea)</option>
              <option value = "cn">中国版 (China)</option>
              <option value = "tw">台灣版 (Taiwan)</option>
              <option value = "jp">日本 (Japan)</option>
              <option value = "hk">香港版 (Hong Kong)</option>
            </select>
          </td>
        </tr>
        <tr class = "all_rows">
          <td class = "col1"><b id = "story_count"></b></td>
          <td class = "col2">
            <select id = "storyCount" style = "padding-left: 3px;" onchange = "enableSaveButton();">
              <option value = "1">1</option>
              <option value = "2">2</option>
              <option value = "3">3</option>
              <option value = "4">4</option>
              <option value = "5" selected = "selected">5</option>
              <option value = "6">6</option>
              <option value = "7">7</option>
              <option value = "8">8</option>
              <option value = "9">9</option>
              <option value = "10">10</option>
            </select>
          </td>
        </tr>
        <tr class = "all_rows">
          <td class = "col1">
            <div id = "topic" style = "font-weight: bold;"></div>
          </td>
          <td class = "col2">
            <div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = " " id = "check11" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "top"></div><br/></div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = "n" id = "check13" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "nation"></div><br/></div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = "w" id = "check14" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "world"></div><br/></div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = "b" id = "check15" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "business"></div><br/></div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = "t" id = "check16" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "science"></div><br/></div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = "e" id = "check17" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "entertainment"></div><br/></div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = "s" id = "check18" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "sports"></div><br/></div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = "m" id = "check19" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "health"></div><br/></div>
              <div class = "boxAndTopic"><input class = "checkBox" type = "checkbox" value = "po" id = "check20" onchange = "manageCheckCount(this.id)"/><div class = "checkBoxTopic" id = "most"></div><br/></div>
            </div>
          </td>
        </tr>
        <tr class = "all_rows">
          <td class = "col1">
            <div id = "custom_text" style = "font-weight: bold;"></div>
          </td>
          <td class = "col2">
            <input id = "newKeyword" type = "text" maxlength = "20" style = "width: 205px;">
            <input id = "submit_button" type = "submit" onclick = "addCusTopic()" style = "width: 45px;">
            <span id = "invalid_status"></span>
            <table>
              <tbody id = "custom_topics"></tbody>
            </table>
          </td>
        </tr>
      </table>
      <br/>
      <div id = "save_div">
        <button id = "save_button" type = "button" disabled = "disabled" onclick = "saveTopicsCountry()" style = "width: 80px;">
        </button>
        <span id = "save_status"></span>
      </div>
    </div>
  </body>
</html>
